<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标拖拽框</title>
	<style>
		body{
            margin:0;
		}
		#box{
			position: absolute;
			top:0;
			left:0;
			background-color: red;
			width:100px;
			height:100px;
			cursor: pointer;
		}
        #box1{
			position: absolute;
			top:200px;
			left:200px;
			background-color: red;
			width:100px;
			height:100px;
			cursor: pointer;
		}
	</style>
</head>
<body>
    <div id="box"></div>
    <div id="box1"></div>


    <script>
        window.onload = ()=> {
            selfDrag('box');
        }
            let selfDrag = (elementId) => {
              //   获取滚动条的距离
                let getPos = () => {
                  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                  let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                  return {x: scrollTop, y: scrollLeft};
                };
                let getStyle = (obj, name) => {
                  // obj.currentStyle就强大多了，他能够获取关于这个节点所有位置的style
                    if(obj.currentStyle){
                        return obj.currentStyle[name];
                    }else{
                        return getComputedStyle(obj, false)[name];
                    }
                };
          
                let oDiv = document.getElementById(elementId);
                console.log(oDiv);
                let disx = 0;
                let disy = 0;
                oDiv.onmousedown = (ev) => {
                    let oEvent = ev || event;
                    let pos = getPos();
                  //   parseInt 解析字符串，返回整数
                    disx = pos.x+oEvent.clientX - parseInt(getStyle(oDiv, 'left'));
                    disy = pos.y+oEvent.clientY - parseInt(getStyle(oDiv, 'top'));
                    document.onmousemove = (ev) => {
                        let oEvent = ev || event;
                        let pos = getPos(oEvent);
                        let l = pos.x+oEvent.clientX - disx;
                        let h = pos.y+oEvent.clientY - disy;
                        if(l<pos.x){
                            l = pos.x;
                        }
                        if(l>document.documentElement.clientWidth + pos.x - parseInt(getStyle(oDiv, 'width'))){
                            l = document.documentElement.clientWidth + pos.x - parseInt(getStyle(oDiv, 'width'));
                        }
                        if(h<pos.y){
                            h = pos.y;
                        }
                        if(h>document.documentElement.clientHeight + pos.y-parseInt(getStyle(oDiv, 'height'))){
                            h = document.documentElement.clientHeight+pos.y-parseInt(getStyle(oDiv, 'height'));
                        }
                        oDiv.style.left = l+'px';
                        oDiv.style.top = h+'px';
                        document.onmouseup = () => {
                            document.onmousemove = null;
                            document.ononmouseup = null;
                        }
                        return false;
                    }
          
                }
          
            }
          </script>
</body>
</html>

